<template>
  <view class="website-message">
    <u-navbar :border-bottom="false" :is-back="false" title="" :background="{backgroundColor: 'rgba(0,0,0,0)'}">
      <view class="navbars u-f-ac u-f-jsb">
        <view class="u-f1">
          <u-icon @click="$u.route({type: 'back', delta: 1})" name="arrow-left" size="34" color="#fff"></u-icon>
        </view>
        <view class="u-f-ajc">
          <image src="/static/images/header.png" mode="widthFix"></image>
        </view>
        <view class="u-f1" style="text-align: right;">
          <!-- <u-button type="error" size="mini" :custom-style="customStyle" @click="showPopup=true">汇购预排</u-button> -->
        </view>
      </view>
    </u-navbar>

    <view class="num_box f-w-700 u-f-ajc u-f-column">
      <view>消息</view>
    </view>

    <view class="message-container">
      <view class="tabs-view2 u-f-ac u-f-jsb">
        <!-- <u-tabs :list="tabsList" :is-scroll="false" :current="current" @change="changeTabs" active-color="#FD5B00"
          bar-width="80"></u-tabs> -->
        <view class="tabs_item u-f-ajc" :class="index == current ? 'tabs_active' : ''" v-for="(item, index) in tabsList"
          :key="index" @click="changeTabs(index)">{{item.name}}</view>
      </view>
      <mescroll-body ref="mescrollRef" top="0" :down="down" @down="downCallback" @up="upCallback">
        <uni-swipe-action class="message-list">
          <view class="message-item" v-for="(message, index) in messageList" :key="index">
            <view class="msg-date">
              {{ message.send_time | unixToDate }}
            </view>
            <view class="msg-content">
              <uni-swipe-action-item :right-options="options" @click="handleMessage(index)">
                <view class="msg-title" v-if="message.title">
                  {{ message.title }}
                </view>
                <view class="msg-detail">
                  {{ message.content }}
                </view>
              </uni-swipe-action-item>
            </view>
          </view>
        </uni-swipe-action>
      </mescroll-body>
    </view>
  </view>
</template>

<script>
  import * as API_Message from '@/api/message.js'
  import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
  export default {
    mixins: [MescrollMixin],
    data() {
      return {
        tabsList: [{
            name: '未读消息'
          },
          {
            name: '全部消息'
          }
        ],
        current: 0,
        params: {
          page_no: 1,
          page_size: 10
        },
        messageList: [], //消息列表
        options: [{
          text: '删除',
          style: {
            backgroundColor: '#FD5B00'
          }
        }],
        down: {
          auto: false //是否在初始化完毕之后自动执行一次下拉刷新的回调
        }
      }
    },
    methods: {
      changeTabs(index) {
        this.current = index
        this.messageList = []
        this.params.page_no = 1
        this.mescroll.resetUpScroll(true)
      },
      //下拉刷新
      downCallback() {
        this.changeTabs(this.current)
      },
      //上拉加载
      upCallback(page) {
        this.params.page_no = page.num
        this.getMessages()
      },
      //左滑删除事件
      handleMessage(index) {
        let that = this
        const id = this.messageList[index].id
        uni.showModal({
          title: '提示',
          content: '确定要删除这条消息吗？',
          confirmColor: '#FD5B00',
          success(res) {
            if (res.confirm) {
              API_Message.deleteMessage(id).then(() => {
                uni.showToast({
                  title: '删除成功'
                })
                that.downCallback()
              })
            }
          }
        })
      },
      //获取站内消息列表
      getMessages() {
        const params = JSON.parse(JSON.stringify(this.params))
        if (this.current !== 1) {
          params.read = 0
        } else {
          delete params.read
        }
        API_Message.getMessages(params).then(async response => {
          const {
            data
          } = response
          if (data && data.length) {
            if (params.read === 0) {
              const ids = data.map(item => item.id).join(',')
              await API_Message.messageMarkAsRead(ids)
            }
            this.messageList.push(...data)
          }
          this.mescroll.endBySize(data.length, response.data_total);
        })
      }
    }
  }
</script>

<style lang="scss">
  .website-message {
    /deep/.mescroll-body {
      min-height: 1166rpx;
    }

    .message-list {
      margin: 0 0 20rpx;

      .msg-date {
        font-size: 26rpx;
        padding: 30rpx 0 20rpx 0;
        text-align: center;
        color: #848689;
        // background-color: #F7F7F7;
      }

      .msg-content {
        background-color: #FFFFFF;
        border-radius: 20rpx;
        overflow: hidden;

        .msg-title {
          padding: 20rpx 20rpx 0 20rpx;
          font-size: 30rpx;
          font-weight: 700;
          color: #343434;
        }

        .msg-detail {
          padding: 30rpx 20rpx;
        }
      }
    }
  }
</style>

<style lang="scss">
  page {
    width: 100%;
    background: url(/static/images/bg.png) no-repeat 0 0;
    background-size: cover;
  }

  .num_box {
    padding: 30rpx 0 60rpx;
    color: #FFDDAE;

    >view:nth-of-type(1) {
      font-size: 60rpx;
    }
  }

  .message-container {
    background-color: #F4F5F7;
    border-radius: 40rpx 40rpx 0 0;
    padding: 40rpx 30rpx 0;
  }

  .tabs-view2 {
    width: 100%;
    border-radius: 50rpx;
    overflow: hidden;
    border: 2px solid #FF1634;
    margin-bottom: 10rpx;

    .tabs_item {
      width: 50%;
      height: 68rpx;
      color: #FF1634;
      background-color: #fff;
      box-sizing: border-box;
    }

    .tabs_active {
      background-color: #FF1634;
      color: #fff;
    }
  }
</style>